<template>
	<div>
		<div class="channel-list" :style="{height:`${height}px`}">
			<div v-for="item in channels" :key='item.id' class="item" :style="{width:`${100/columns}%`}">
				<!-- 给channel组件传递数据 -->
				<channel :isActive="item.id === activeId" :data="item" @active="$emit('active',item.id)"></channel>
			</div>
		</div>
		<div class="collapse" @click="isExpand = !isExpand">
			<span>{{isExpand?"收起":"展开"}}</span>
			<!-- 添加了一个额外的类样式的属性 -->
			<Icon :type="isExpand?'arrowUp':'arrowDown'" extraClass="icon"></Icon> 
			<!-- icon元素需要一个type属性才能正常显示 -->
			<!-- 此处为小图标的引用，复制代码并添加在class中 -->
			<!-- 对状态进行一个判断，如果是展开状态，则显示“折叠”文字和上箭头图标，反之则显示“展开”文字和下箭头图标 -->
			<!-- 从其他库引用过来的图标最好是封装成一个组件，不然后期更改图标的时候需要该很多处import的url地址 -->
			<!-- <i class="iconfont" :class="isExpand?'icon-iconfonticontrianglecopy':'icon-xiajiantou'"></i> -->
		</div>
	</div>


</template>

<script>
	import channel from './channel.vue'
	import channelServ from '../services/channel.js'
	import Icon from './icon'
	export default {
		computed: {
			height() {
				var rows = 3
				if (this.isExpand) {
					// 此处进行高度的计算
					rows = Math.ceil(this.channels.length / this.columns);
				}
				return rows * 40;
			}
		},
		props: {
			activeId: {
				type: Number,
				required: true
			},
			columns: {
				type: Number,
				default: 2
			}
		},
		components: {
			channel,
			Icon
			
		},
		data() {
			return {
				channels: [],
				isExpand: true //是否是展开状态，默认为true
			}
		},
		// 组件被创建的时候调用该函数
		async created() {
			// console.log("组件被创建")
			// this.channels = await channelServ.getChannels()
			var datas = await channelServ.getChannels()
			// 将“热门”这个数据筛选掉，因为热门就是最顶上的那个
			this.channels = datas.filter((item) => item.name !== "热门")
		}
	}
</script>

<style scoped="scoped">

	.icon {
		font-size: 12px;
		margin-left: 5px;
	}

	.collapse {
		clear: both;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		color: #999;
		cursor: pointer;/* 将鼠标状态变成小手形状 */
		border-bottom: 1px solid #e7e7e7;
	}

	.channel-list {
		overflow: hidden;
		transition: 0.5s;/* transition使颜色变化的速度变缓，不会显得生硬 */
	}

	.item {
		float: left;
		/* width: 50%; */
	}
</style>
